import React from "react";
import "./App.css";
import CustomHeader from "./components/CustomHeader";
import TabBar from "./components/TabBar";
import ThemeContext from "./context/theme-context";
import GetDom from "./views/01.获取dom";
function App() {
  const tabList = ["全部1", "精华", "分享"];
  const [activeIndex, setActiveIndex] = React.useState(0);
  const [theme, setTheme] = React.useState("dark"); // 主题
  const handleTabChange = (index: number) => {
    setActiveIndex(index);
  };
  // const tabItem = (item: string) => <button>{item}</button>;
  return (
    <ThemeContext.Provider value={theme}>
      <div className="App">
        <p>helleo world</p>
        <CustomHeader
          leftSlot={<input type="checkbox" />}
          centerSlot={<h2>props的React元素</h2>}
          rightSlot={<i>React元素</i>}
        ></CustomHeader>
        <div>tabBar current Index : {activeIndex}</div>
        <hr />
        <TabBar tabList={tabList} onTabChange={handleTabChange}></TabBar>
      </div>
      <button onClick={() => setTheme(theme === "dark" ? "light" : "dark")}>
        Toggle theme
      </button>
      <hr />
      <GetDom></GetDom>
    </ThemeContext.Provider>
  );
}

export default App;
